import React, { useState } from "react";
import { Link, useHistory } from "umi";
import styles from './index.less'
const TopSelection: React.FC = () => {
    const history = useHistory();
    const [currentPath, setCurrentPath] = useState<string>(
        history.location.pathname || "/"
    );
    const menuOption = [
        {
            text: "个性推荐",
            key: "recommend",
            path: "/",
        },
        {
            text: "歌单",
            key: "song_list",
            path: "/song_list",
        },
        {
            text: "主播电台",
            key: "radio_station",
            path: "/radio_station",
        },
        {
            text: "排行榜",
            key: "leaderboard",
            path: "/leaderboard",
        },
        {
            text: "歌手",
            key: "singer",
            path: "/singer",
        },
        {
            text: "最新音乐",
            key: "latest_music",
            path: "/latest_music",
        },
    ];
    const onClick = (path:string)=>{
        setCurrentPath(path)
    }
    return (
        <div
            className={styles['topselection']}
        >
            {menuOption.map(({  text, path }) => (
                <div 
                key={`router${path}`}
                onClick={()=>onClick(path)}
                className={`${styles['selection-one']} ${currentPath===path ? styles['selected']:''}`}>
                    <Link to={path}>{text}</Link>
                    <div className={styles['border-box']}>
                    </div>
                </div>
            ))}
        </div>
    )
}
export default TopSelection 